const Interface = "http://localhost/Student/"

let Students =[];

const tbodyElement = document.querySelector("tbody");
const updateBtn = document.querySelector(".update-btn");
const deleteBtn = document.querySelector(".delete-btn");
const searchBox = document.querySelector("#search-box");
function BrushStudent() {
    axios.get(Interface).then(res=>{
        Students = res.data
        tbodyElement.innerHTML = Students.map(item=>{
            return `<tr data-id="${item.studentId}">
                <td>${item.studentId}</td>
                <td>${item.studentName}</td>
                <td>${item.classname}</td>
                <td>${item.classTeacher}</td>
                <td>
                    <button class="update-btn">修改</button>
                    <button class="delete-btn" value="${item.studentId}">删除</button>
                </td>
            </tr>`;
        }).join("")
        // console.log(res.data)
    })
}
BrushStudent()
searchBox.addEventListener("change",function (event) {
    console.log(event.target.value)
    axios.get(Interface+"?studentName="+event.target.value).then(
        res=>{
            console.log(res)
            // Students = res.data
            // tbodyElement.innerHTML = Students.map(item=>{
            //     return `<tr data-id="${item.studentId}">
            //     <td>${item.studentId}</td>
            //     <td>${item.studentName}</td>
            //     <td>${item.classname}</td>
            //     <td>${item.classTeacher}</td>
            //     <td>
            //         <button class="update-btn">修改</button>
            //         <button class="delete-btn">删除</button>
            //     </td>
            // </tr>`;
            // }).join("")
        }
    )
})
tbodyElement.addEventListener("click",function (event) {
    if (event.target.className == "delete-btn"){
        const delId = event.target.value;
        console.log(delId)
        axios.delete(Interface+delId).then(res=>{
            console.log(res)
        })
    }

})